<template>
 <div>
    <el-container>
        <!-- 头部 -->
        <el-header class="header">
            <div class="logo">云E办</div>
            <div class="userinfo">
                <div class="info">
                    
                    <el-button style="color:black;font-weight:bold; margin-right:8px;" @click="goChat"  icon="el-icon-bell" type="text"></el-button>
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">{{currentAdmin ? currentAdmin.name : ''}}</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
                        <el-dropdown-item command="setting">设置</el-dropdown-item>
                        <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <el-image :src="currentAdmin ? currentAdmin.userFace : ''" />
            </div>
        </el-header>
        <el-container>
            <!-- 菜单 -->
            <el-aside width="200px">
                <el-menu router>
                    <!-- 循环路由 -->
                    <el-submenu :index="index+''" v-for="(item,index) in routes" :key="index" unique-opened>
                        <template slot="title">
                            <i :class="item.icon" style="color:rgb(0 199 255);margin-right:5px;"></i>
                            <span slot="title">{{item.name}}</span>
                        </template>
                        <!-- 循环二级路由 -->
                        <el-menu-item v-for="(childrenItem,cindex) in item.children" :key="cindex" :index="childrenItem.path">
                            {{childrenItem.name}}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <!-- 主体 -->
            <el-main>
                <!-- 面包屑导航 -->
                <el-breadcrumb class="main_content"  separator-class="el-icon-arrow-right" v-if="!(this.$route.path == '/home')">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{path:this.$route}">{{this.$route.name}}</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 主体内容 -->
                <div class="welcome" v-if="(this.$route.path == '/home')">欢迎使用云E办</div>
                <router-view />
            </el-main>
        </el-container>
    </el-container>
 </div>
</template>

<script>
import {myConfirm} from '@/utils/myutils'
import{mapState} from 'vuex'
 export default {
   name: 'Home',
   props: {
   },
   components: {

   },
   data () {
     return {
     }
   },
   methods: {
       handleCommand(obj){
           if(obj == 'logout'){
               this.logout();
           }
       },

        //退出登录
       logout(){
           myConfirm({content:'确定要退出吗？'}).then(()=>{
                window.sessionStorage.clear();
                this.$router.replace("/");
           })
       },

       //去聊天界面
       goChat(){
           this.$router.push({path:'/chat'});
       }
   },
   mounted() {
 
   },
   watch: {

   },
   computed:mapState(['currentAdmin','routes']),
   filters: {

   }
 }
</script>

<style scoped>
    .main_content{
        margin-bottom:8px;
    }

    .welcome{
        width:100%;
        font-size:40px;
        display:flex;
        justify-content:center;
        color:#409eff;
        margin-top:50px;
        font-family: 楷体;
    }

    .header{
        background-color:#409eff;
        display:flex;
        align-items: center;
    }

    .header .logo{
        font-size: 30px;
        color:#fff;
        font-weight:bold;
        font-family: 楷体;
        flex:8;
    }

    .userinfo{
        /* border:1px solid #0f0; */
        flex:1 1 1;
        display:flex;
        align-items: center;
        justify-content: space-between;
    }

    .header .userinfo .el-image{
        margin-left:5px;
        height:45px;
        width:45px;
        border-radius:24px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #fff;
    }
</style>